//引入react
import React from 'react'
//引入react
import ReactDom from 'react-dom'
//引入classnames
import ClassName from 'classnames'

//简单的组件实现：这是函数组件
// const App = props => {
//     return(
//         <div>
//             <h1>Hello {props.title}</h1>
//             <h4>这是react页面</h4>
//         </div>
//     ) 
// }

// ReactDom.render(
//     // 函数组件使用函数调用的方法实现：App()
//     App({title : '这是标题'}),
//     document.querySelector('#root')
// )

import './index.css'

// 简单的组件实现：这是类组件
class App extends React.Component {
    render () {
        let isActive = false
        //不使用classnames处理样式的方法
        // let cls = isActive ? 'desc-box active' : 'desc-box'
        // return(
        //     <div className={cls}>
        //         {/* this指的是当前的组件，props是渲染页面是组件标签传过来的值 */}
        //         <h1>Hello {this.props.title}</h1>
        //         <h4>{this.props.desc}</h4>
        //     </div>
        // )

        //使用classnames
        return (
            <div className={ ClassName('desc-box',{active: isActive}) }>
                <h1>Hello {this.props.title}</h1>
                <h4>{this.props.desc}</h4>
            </div>
        )
    }
}

const desc = '这是react页面'

ReactDom.render(
    //类组件使用组件标签的形式实现：<App></App>
    <App title = 'nihao' desc={desc}></App>,
    document.querySelector('#root')
)
